<template>
	<view class="index">
		<!-- 个人信息列表 -->
		<view class="meassageList">
			<!-- 头像 -->
			<view @tap="chooseImg" class="meassageListItem avatar">
				<text class="key">头像</text>
				<view class="rightBox">
					<view class="avatarPicture">
						<image :src="httpUrl+userInfo.appUser?.avatarId" mode="widthFix"></image>
					</view>
					<image src="@/static/img/chevronRight.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- 昵称 -->
			<view class="meassageListItem">
				<view class="top">
					<text class="key">昵称</text>
					<view class="rightBox">
						<text v-if="!edit">{{userInfo?.appUser?.userName}}</text>
						<input @blur="confirm" @confirm="confirm" v-if="edit"  :value="userInfo?.appUser?.userName" maxlength="20" placeholder="请输入昵称" />
						<image @tap="edit=!edit" src="@/static/img/bi.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="border"></view>
			</view>
            <view class="meassageListItem">
				<view class="top">
					<text class="key">手机号</text>
					<view class="rightBox">
						<text v-if="!edit">{{userInfo?.appUser?.phone}}</text>
					</view>
				</view>
				<view class="border"></view>
			</view>

			<!-- 性别 -->
			<view class="meassageListItem">
				<view class="top">
					<text class="key">性别</text>
					<view class="rightBox">
						<picker @change="bindGenderChange" :value="userInfo.appUserAuthentication.gender?.value"
							:range="genderArray">
							<view class="uni-input">{{userInfo.appUserAuthentication.gender?.name}}</view>
						</picker>
						<image src="@/static/img/chevronRight.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="border"></view>
			</view>
			<!-- 生日 -->
			<view class="meassageListItem">
				<view class="top">
					<text class="key">出生日期</text>
					<view class="rightBox">
						<picker mode="date" :value="userInfo.appUserAuthentication.birthday" :start="startDate"
							:end="endDate" @change="bindDateChange">
							<view class="uni-input">{{userInfo.appUserAuthentication.birthday}}</view>
						</picker>
						<image src="@/static/img/chevronRight.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="border"></view>
			</view>
			
			<!-- 签名 -->
			<!-- <view class="meassageListItem">
				<view class="top">
					<text class="key">签名</text>
					<view class="rightBox">
						<view v-if="!edit" class="signature">
							{{userInfo?.appUser?.autograph}}
						</view>
						<input v-if="edit" class="signature" :value="userInfo?.appUser?.autograph" maxlength="10" placeholder="请输入签名" />
						<image src="@/static/img/chevronRight.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="border"></view>
			</view> -->
			<!-- 身份证 -->
			<view class="meassageListItem">
				<view class="top">
					<text class="key">实名认证</text>
					<view class="rightBox">
						<view @tap="lookVerifyCert" v-if="userInfo.appUser?.verifyState?.value=='DONE_VERIFY'" class="identityCard">
							已实名认证
						</view>
						<view @tap="toVerifyCert" v-if="userInfo.appUser?.verifyState?.value=='WAIT_VERIFY'" class="identityCard">
							去认证
						</view>
						<image src="@/static/img/chevronRight.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="border"></view>
			</view>
			<!-- 资质 -->
			<view class="meassageListItem" @tap="toUserStoreZhizhi">
				<view class="top">
					<text class="key">资质</text>
					<view class="rightBox">
						<text></text>
						<image src="@/static/img/chevronRight.png" mode="widthFix"></image>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script setup lang="ts">
	import { queryUserInfo, setAppUserInfo,updateAutograph } from '@/utils/api/userInfo.ts'
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { setDialogView } from '@/utils/dialogView.ts'
	const userInfo = ref<any>({})
	const startDate = ref('1900-01-01')
	const endDate = ref('2030-01-01')
	const genderArray = ref(["男", "女"])
	const httpUrl = getApp().globalData.baseUrl+'/app/file/viewFile?fileId='
	const edit = ref(false)
 
	const doQueryUserInfo = async () => {
		const userRes = await queryUserInfo()
		userInfo.value = userRes.data
	}

	function bindDateChange(e) {
		console.log(e.detail.value)
		setAppUserInfo({ data: { birthday: e.detail.value } }).then(res => {
			doQueryUserInfo()
			uni.showToast({
				title: '更新成功',
				icon: 'success'
			})
		})
	}

	function bindGenderChange(e) {

		setAppUserInfo({ data: { gender: e.detail.value } }).then(res => {
			doQueryUserInfo()
			uni.showToast({
				title: '更新成功',
				icon: 'success'
			})
		})
	}

	const confirm = async (value) => {
		if (edit.value) {
			edit.value = false
			await setAppUserInfo({ data: { user: {userName:value.detail.value} } })		
			doQueryUserInfo()
		}
	}
	
	
	const toUserStoreZhizhi = () => {
		uni.navigateTo({
			url: '/pages/qualificationInformationShop/index'
		})
	}
	const toVerifyCert =()=>{
		uni.navigateTo({
			url: '/pages/identityAuthentication/index'
		})
	}

	const lookVerifyCert =()=>{
		uni.navigateTo({
			url: '/pages/identityAuthentication/authenticationInfo'
		})
		
	}

	const chooseImg = () => {
		uni.showActionSheet({
			itemList: ['相册',],
			success: function (res) {
				setDialogView('READ_EXTERNAL_STORAGE').then(res=>{
					if(res == 1){
						uni.chooseImage({
							count: 1,
							sourceType: ["album"],
							success: (chooseImageRes) => {
						
							    uni.uploadFile({
									url: `${getApp().globalData.baseUrl}/app/file/uploadFile`,
									filePath: chooseImageRes.tempFilePaths[0],
									name: 'file'
								}).then(res=>{
									const fileId=JSON.parse(res.data).data.fileId
									setAppUserInfo({data:{user:{avatarId:fileId}}}).then(res=>{
										doQueryUserInfo()
										uni.showToast({
											title: '更新成功',
											icon: 'success'
										})
										
									})
								}) 
							
							},
						});
					}
				})
				
			}
		});





	}


	onLoad(() => {
		doQueryUserInfo()
	})
</script>

<style lang="scss" scoped>
	.index {
		height: 100vh;
		background-color: #f4f6fa;

		.meassageListItem {
			padding-left: 32rpx;
			font-size: 32rpx;
			color: #262626;
			background-color: #fff;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 111rpx;
				padding-right: 32rpx;

				// .key {
				// 	font-weight: bold;
				// }
			}

			image {
				width: 36rpx;
			}

			.rightBox {
				display: flex;
				align-items: center;

				text {
					margin-right: 16rpx;
					font-size: 32rpx;
					color: #8C8C8C;
				}

			}
		}

		.border {
			// height: 1px;
			border-bottom: 1rpx solid #E5E5E5;
		}

		.avatar {
			height: 128rpx;
			margin: 24rpx 0;
			padding-right: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.rightBox {
				.avatarPicture {
					width: 96rpx;
					height: 96rpx;
					border-radius: 97rpx;
					overflow: hidden;
					margin-right: 16rpx;

					image {
						width: 96rpx;
					}
				}
			}
		}

		.signature {
			font-size: 32rpx;
			width: 487rpx;
			/* 禁止文本自动换行 */
			white-space: nowrap;
			/* 溢出内容隐藏 */
			overflow: hidden;
			/* 溢出内容以省略号显示 */
			text-overflow: ellipsis;
			color: #8C8C8C;
		}

		.identityCard {
			width: 154rpx;
			height: 50rpx;
			background: #CFF0FF;
			color: #1188FF;
			border-radius: 8rpx;
			font-size: 28rpx;
			text-align: center;
			line-height: 50rpx;
			margin-right: 16rpx;
		}
	}
</style>